<template>
    <div>
        <header class="mb-30">
            <span>所属诊改阶段</span>
            <el-select
                class="mx-15 w-160 my-select"
                :popper-append-to-body="false"
                v-model="searchParams.year"
                @change="changeYear"
                placeholder="请选择所属诊改阶段"
            >
                <el-option
                    v-for="(year, i) in yearArr"
                    :key="i"
                    :label="year"
                    :value="year"
                ></el-option>
            </el-select>
            <span>报告类型</span>
            <el-select
            class="mx-15 w-160 my-select"
                :popper-append-to-body="false"
                v-model="searchParams.reportType"
                @change="changeType"
                placeholder="请选择报告类型"
            >
                <el-option
                    v-for="(item, i) in reportTypeOption"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="searchData"
                >查询</el-button
            >
            <el-button
                type="success"
                size="small"
                @click="
                    dialogVisible = true;
                    showType = true;
                "
                >新增</el-button
            >
        </header>
        <el-table
            :data="tableData"
            size="medium"
            style="width: 100%"
            stripe
            ref="multipleTable"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                align="center"
                type="selection"
                width="50"
            ></el-table-column>
            <el-table-column
                align="center"
                type="index"
                label="序号"
                width="60"
            ></el-table-column>
            <el-table-column align="center" prop="year" label="诊改阶段">
            </el-table-column>
            <el-table-column align="center" label="报告类型">
                <template slot-scope="scope">{{
                    scope.row.reportType | filteReportType
                }}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="startTime"
                label="编制开始时间"
            >
            </el-table-column>
            <el-table-column align="center" prop="endTime" label="编制结束时间">
            </el-table-column>
            <el-table-column align="center" prop="remark" label="备注">
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small"
                        >修改</el-button
                    >
                    <el-button type="text" size="small" @click="del(scope.row)"
                        ><span class="c-error">删除</span></el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="mt-30 text-center">
            <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="searchParams.pageIndex"
                layout="prev, pager, next, jumper"
                prev-text="上一页"
                next-text="下一页"
                :total="total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="showType ? '新增报告' : '修改报告'"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="30%"
            @close="closeDialog('ruleForm')"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="110px"
                label-position="left"
            >
                <el-form-item v-if="showType" label="所属诊改阶段" prop="year">
                    <el-select
                        class=""
                        v-model="ruleForm.year"
                        @change="changeYear"
                        placeholder="请选择所属诊改阶段"
                    >
                        <el-option
                            v-for="(year, i) in yearArr"
                            :key="i"
                            :label="year"
                            :value="year"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="showType"
                    label="报告类型"
                    prop="reportType"
                >
                    <el-select
                        class=""
                        v-model="ruleForm.reportType"
                        @change="changeType"
                        placeholder="请选择报告类型"
                    >
                        <el-option
                            v-for="(item, i) in reportTypeOption"
                            :key="i"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="编制开始时间" prop="startTime">
                    <el-date-picker
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择编制开始时间"
                        v-model="ruleForm.startTime"
                        style="width: 100%;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="编制结束时间" prop="endTime">
                    <el-date-picker
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择编制结束时间"
                        v-model="ruleForm.endTime"
                        style="width: 100%;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                        type="textarea"
                        v-model="ruleForm.remark"
                        maxlength="240"
                        show-word-limit
                        :rows="6"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit('ruleForm')"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getLevelCode,
    targetStandardReportEditCycle,
    targetStandardReportEditCycleParams,
    queryAll,
    targetStandardReportEditCycleData,
    targetStandardReportEditCycleId,
    targetStandardReportEditCycleDel,
    queryLimit
} from '@/api/report';
export default {
    name: 'MaintenanceCycleManage',
    data () {
        return {
            yearArr: this.$config.yearArr(),
            reportTypeOption: [],
            searchParams: {
                reportType: null,
                year: null,
                pageIndex: 1,
                pageSize: 20
            },
            total: 0,
            id: '',
            tableData: [],
            multipleSelection: [],
            dialogVisible: false,
            showType: null,
            ruleForm: {
                year: '',
                id: 0,
                reportType: '',
                startTime: '',
                endTime: '',
                remark: ''
            },
            rules: {
                year: [
                    {
                        required: true,
                        message: '请选择所属诊改阶段',
                        trigger: 'change'
                    }
                ],
                reportType: [
                    {
                        required: true,
                        message: '请选择报告类型',
                        trigger: 'change'
                    }
                ],
                startTime: [
                    {
                        required: true,
                        message: '请选择编制开始时间',
                        trigger: 'change'
                    }
                ],
                endTime: [
                    {
                        required: true,
                        message: '请选择编制结束时间',
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    created () {
        this.init();
    },
    mounted () {},
    methods: {
        init () {
            getLevelCode().then(res => {
                console.log(res, 'getLevelCode');
                this.reportTypeOption = res;
            });
            this.search();
        },
        // 诊改阶段
        changeYear (val) {},
        // 报告类型
        changeType (val) {},
        search () {
            targetStandardReportEditCycleParams(this.searchParams).then(res => {
                console.log(res, 'targetStandardReportEditCycleParams');
                this.tableData = res.dataList;
                this.searchParams.pageSize = res.pageSize;
                this.total = res.total;
            });
        },
        add () {},
        handleSelectionChange (val) {
            this.multipleSelection = val;
            console.log(val);
        },
        edit (item) {
            this.dialogVisible = true;
            this.showType = false;
            this.id = item.id;
            this.ruleForm = { ...item }
            console.log(this.id);
        },
        del (item) {
            targetStandardReportEditCycleDel(item.id).then(res => {
                console.log(res);
                this.message('success', '删除成功');
                this.search();
            });
        },
        // 表格数据
        handleCurrentChange (val) {
            this.searchParams.pageIndex = val;
            console.log(`当前页: ${val}`);
            this.search();
        },
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`);
            this.search();
        },
        closeDialog (formName) {
            this.dialogVisible = false;
            this.$refs[formName].resetFields();
            this.ruleForm.remark = '';
        },
        submit (formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    console.log(this.ruleForm);
                    if (this.showType) {
                        await targetStandardReportEditCycleData(
                            this.ruleForm
                        ).then(res => {
                            this.message('success', '新增成功');
                        });
                    } else {
                        await targetStandardReportEditCycleId(
                            this.id,
                            this.ruleForm
                        ).then(res => {
                            this.message('success', '修改成功');
                        });
                    }
                }
                this.closeDialog('ruleForm');
                this.search();
            });
        },
        searchData () {
            queryLimit({
                reportType: this.searchParams.reportType,
                year: this.searchParams.year
            }).then(res => {
                console.log(res);
                this.tableData = res.dataList
            });
        }
    }
};
</script>

<style lang="scss" scoped>

</style>
